import React, { createContext, useState } from "react";
import useAuthButtons from "@/hooks/useAuthButtons";

import ResourceSide from "./ResourceSide";
import ResourceContent from "./ResourceContent";
import { RecordDetail } from "./type";

import "./index.less";

export const Context = createContext({});

const ResourceManage = () => {
	// 按钮权限
	const { BUTTONS } = useAuthButtons();
	// console.log(BUTTONS.add);

	const [selResourceId, setSelResourceId] = useState<React.Key>();
	const [editDetail, setEditDetail] = useState<RecordDetail>();
	const handleSelect = (menuId:  React.Key) => {
		setSelResourceId(menuId);
	};

	const handleEdit = (value: RecordDetail) => {
		setEditDetail({ ...value });
	};

	return (
		<div className="role-manage startStretch card">
			<ResourceSide editDetail={editDetail} onSelect={handleSelect}></ResourceSide>
			<ResourceContent menuId={selResourceId} onEdit={handleEdit}></ResourceContent>
		</div>
	);
};

export default ResourceManage;
